<template>
  <div class="login">
    <div class="side-img">
      <img src="../assets/images/dog.png" />
    </div>
    <div class="side-right">
      <div class="title">密码登录</div>
      <el-form
        class="login-form"
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
      >
        <el-form-item prop="mobile">
          <el-input
            ref="username"
            placeholder="手机号"
            name="username"
            type="text"
            class="login-it"
            v-model="loginForm.mobile"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            ref="username"
            placeholder="密码"
            name="username"
            type="password"
            class="login-it"
            v-model="loginForm.password"
          />
        </el-form-item>
        <div>
          <el-button
            :loading="loading"
            type="primary"
            style="width: 100%; margin-bottom: 30px"
            @click="signIn"
            >登录</el-button
          >
        </div>
        <div class="reg-box">
          <div class="reg" @click="dialogVisible = true">注册</div>
        </div>
      </el-form>
    </div>
    <!-- 注册弹框 -->
    <el-dialog
      title="注册"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <Reg />
    </el-dialog>
  </div>
</template>
<script>
import Reg from "@/components/reg.vue";
export default {
  name: "Login",
  components: {
    Reg,
  },
  data() {
    // 手机号效验
    function validMoblie(str) {
      return /^1[3-9]\d{9}/.test(str);
    }
    const validateUsermobile = (rule, value, callback) => {
      validMoblie(value)
        ? callback()
        : callback(new Error("请输入正确的11位手机号"));
    };

    return {
      radio: "1",
      loading: false,
      dialogVisible: false,
      nikeName: "请上传头像",
      loginForm: {
        mobile: "",
        password: "",
      },
      loginRules: {
        mobile: [
          { required: true, trigger: "blur", message: "手机号不能为空" },
          { validator: validateUsermobile },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
          { trigger: "blur", min: 6, max: 16, message: "密码为6-16位" },
        ],
      },
    };
  },
  methods: {
    //登录
    signIn() {
      this.loading = true;
      let obj = {
        name: "11111276767hhdgfgjyf",
        time: new Date().getTime(),
      };
      localStorage.setItem("token", JSON.stringify(obj));
      this.$router.push("/home");
      this.loading = false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped>
.login {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #fff;
  padding-right: 100px;
}
.side-img {
  float: left;
  width: 700px;
  height: 100%;
  background: #fff;
  border-radius: 6px;
  border: 2px solid red;
  box-sizing: border-box;
}
.side-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.side-right {
  float: right;
  width: 378px;
  height: 500px;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.05098);
  margin-top: 50px;
  padding: 20px;
  box-sizing: border-box;
}
.login-form {
  text-align: center;
}
.login-it {
  width: 100%;
}
.el-form-item__error {
  left: 0;
}
.side-right .title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 40px;
  margin-top: 20px;
}

.reg-box {
  text-align: right;
}
.reg-box .reg {
  margin-right: 10px;
}
.reg-box .reg,
.forgot {
  display: inline-block;
  font-size: 16rpx;
  font-weight: bold;
}
</style>